<template>
  <div>
    <teleport to="body" :disabled="!transfer">
      <transition
        :loading="true"
        :name="transitionName"
      >
        <!-- <div ref="drop" v-show="visible" class="haloe-select-dropdown" :style="mergedStyle" ></div> -->
        <div
          v-show="visible"
          class="haloe-select-dropdown"
          ref="drop"
          :class="mergedClass"
          :style="mergedStyle"
          v-bind="$attrs"
          @mouseenter="handleMouseenter"
          @mouseleave="handleMouseleave"
          @click.stop="handleClick"
          v-resize="handleResize"
        >
          <slot></slot>
        </div>
      </transition>
      <slot name="loading"></slot>
    </teleport>
  </div>
</template>
<script>
import { nextTick } from 'vue'
// import Vue from 'vue';
// const isServer = Vue.prototype.$isServer;
import { getStyle, findComponentUpward } from '../../utils/assist'
// const Popper = isServer ? function() {} : require('popper.js/dist/umd/popper.js');  // eslint-disable-line
import Popper from 'popper.js/dist/umd/popper.js'
import { transferIndex, transferIncrease } from '../../utils/transfer-queue'
import bus from 'vue3-eventbus'

export default {
  name: 'Drop',
  emits: ['mouseenter', 'mouseleave', 'click', 'on-resize'],
  props: {
    placement: {
      type: String,
      default: 'bottom-start',
    },
    className: {
      type: String,
    },
    transfer: {
      type: Boolean,
    },
    // 4.6.0
    eventsEnabled: {
      type: Boolean,
      default: false,
    },
    visible: {
      type: Boolean,
    },
    classes: {
      type: Object,
      default: () => {},
    },
    styles: {
      type: Object,
      default: () => {},
    },
    transitionName: {
      type: String,
      default: 'transition-drop',
    },
    boundariesElement: {
      // type: [String, HTMLElement],
      default: 'window',
    },
  },
  data() {
    return {
      popper: null,
      width: '',
      popperStatus: false,
      hasAutoCompleteUpward: false,
      tIndex: this.handleGetIndex(),
    }
  },
  computed: {
    mergedStyle() {
      let style = {}
      if (this.width) style.minWidth = `${this.width}px`
      if (this.transfer) style['z-index'] = 1060 + this.tIndex
      return Object.assign({}, this.styles, style)
    },
    mergedClass() {
      return Object.assign({}, this.classes, {
        [this.className]: this.className,
      })
    },
  },
  methods: {
    handleResize() {
      if (this.hasAutoCompleteUpward) {
        bus.emit('on-dropdown-resize')
      }
    },
    update() {
      // if (isServer) return;
      nextTick(() => {
        if (this.popper) {
          this.popper.update()
          this.popperStatus = true
        } else {
          this.popper = new Popper(
            this.$parent.$refs.reference,
            this.$refs.drop,
            {
              eventsEnabled: this.eventsEnabled,
              placement: this.placement,
              modifiers: {
                computeStyle: {
                  gpuAcceleration: false,
                },
                preventOverflow: {
                  boundariesElement: this.boundariesElement,
                },
              },
              onCreate: () => {
                this.resetTransformOrigin()
                nextTick(this.popper.update())
              },
              onUpdate: () => {
                this.resetTransformOrigin()
              },
            }
          )
        }
        // set a height for parent is Modal and Select's width is 100%
        if (this.$parent.$options.name === 'eSelect') {
          this.width = parseInt(getStyle(this.$parent.$el, 'width'))
        }
        this.tIndex = this.handleGetIndex()
        this.handleResize()
      })
    },
    destroy() {
      if (this.popper) {
        setTimeout(() => {
          if (this.popper && !this.popperStatus) {
            //fix:#910
            this.popper.popper.style.display = 'none'
            this.popper.destroy()
            this.popper = null
          }
          this.popperStatus = false
        }, 300)
      }
    },
    resetTransformOrigin() {
      // 不判断，Select 会报错，不知道为什么
      if (!this.popper) return
      let x_placement = this.popper.popper.getAttribute('x-placement')
      let placementStart = x_placement.split('-')[0]
      let placementEnd = x_placement.split('-')[1]
      const leftOrRight = x_placement === 'left' || x_placement === 'right'
      if (!leftOrRight) {
        this.popper.popper.style.transformOrigin =
          placementStart === 'bottom' ||
          (placementStart !== 'top' && placementEnd === 'start')
            ? 'center top'
            : 'center bottom'
      }
    },
    handleGetIndex() {
      transferIncrease()
      return transferIndex
    },
    handleMouseenter(e) {
      this.$emit('mouseenter', e)
    },
    handleMouseleave(e) {
      this.$emit('mouseleave', e)
    },
    handleOnUpdatePopper() {
      this.update()
    },
    handleOnDestroyPopper() {
      this.destroy()
    },
    handleClick(event) {
      this.$emit('click', event)
    },
  },
  mounted() {
    this.hasAutoCompleteUpward = Boolean(
      findComponentUpward(this, 'eAutoComplete')
    )
  },
  beforeUnmount() {
    if (this.popper) {
      this.popper.destroy()
      this.popper = null
    }
  },
}
</script>
